import {
  PageContainer,
} from '@ant-design/pro-components';
import { useParams } from 'umi';
import React, {useEffect, useState} from 'react';
import { ProCard } from '@ant-design/pro-components';
import { Card } from 'antd';
const { Meta } = Card;
import ReactECharts from 'echarts-for-react';

import { Col, Row, Statistic } from 'antd';
import {getBilibiliDescUsingPOST, getTagsDistUsingPOST} from "@/services/datafa-backend/bilibiliController";
import {getDouyinDescUsingPOST, getTagsDistUsingPOST1} from "@/services/datafa-backend/douyinController";
import {getKuaishouDescUsingPOST, getTagsDistUsingPOST2} from "@/services/datafa-backend/kuaishouController";

const TableList: React.FC = () => {

  const [date, setDate] = useState<string[]>();
  const [data, setData] = useState<any>();
  const [comment, setComment] = useState<string>();
  const [fan, setFan] = useState<string>();
  const [share, setShare] = useState<string>();
  const [avatar, setAvatar] = useState<string>();
  const [nickname, setNickname] = useState<string>();
  const [data1, setData1] = useState<any>();




  const option = {
    xAxis: {
      type: 'category',
      data: date
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  };

  const option2 = {
    title: {
      text: '类型分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },

    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: 'Area Mode',
        type: 'pie',
        radius: [20, 140],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 5
        },
        data: data1
      }
    ]
  };

  const params: any = useParams();


  const loadData = async () => {
    setDate([]);
    setData1([]);
    let res: API.BaseResponseDescVO_ = {};
    if (params.platform === "bilibili") {
      res = await getBilibiliDescUsingPOST({
        id: params.id
      });
      const res1: API.BaseResponseListTagDistVO_ = await getTagsDistUsingPOST({
        id: params.id
      })
      setData1(res1.data)
    } else if (params.platform === "douyin") {
      res = await getDouyinDescUsingPOST({
        id: params.id
      })
      const res1: API.BaseResponseListTagDistVO_ = await getTagsDistUsingPOST1({
        id: params.id
      });
      setData1(res1.data)
    } else if (params.platform === "kuaishou") {
      res = await  getKuaishouDescUsingPOST({
        id: params.id
      })
      const res1: API.BaseResponseListTagDistVO_ = await getTagsDistUsingPOST2({
        id: params.id
      })
      setData1(res1.data)
    }
    setDate(res.data?.date || []);
    setData(res?.data?.data || [])
    setShare(res?.data?.share);
    setFan(res?.data?.fan);
    setAvatar(res?.data?.avatarUrl)
    setComment(res?.data?.comment)
    setNickname(res?.data?.nickname)
  }

  useEffect(() => {
    loadData();
  }, [])



  return (
    <PageContainer title={"up信息"}>
      <ProCard split="vertical">
        <ProCard colSpan="23%">
          <Card
            hoverable
            style={{ width: 240 }}
            cover={<img alt="example" referrerPolicy={"no-referrer"} src={avatar} />}
          >
            <div>
              <Meta title={`nickname: ${nickname}`} />
              <br/>
              <Row gutter={16}>
                <Col span={8}>
                  <Statistic title="粉丝数" value={fan} />
                </Col>
                <Col span={8}>
                  <Statistic title="转发数" value={share} />
                </Col>
                <Col span={8}>
                  <Statistic title="评论数" value={comment} />
                </Col>
              </Row>
            </div>
          </Card>
        </ProCard>
        <ProCard title="数据变化柱状图" headerBordered>
          <Row>
            <Col span={12}>
              <ReactECharts style={{height:"500px"}} option={option} />

            </Col>
            <Col style={{height: "1000"}} span={12}>
              <ReactECharts style={{height:"500px"}} option={option2} />
            </Col>
          </Row>


        </ProCard>
      </ProCard>

    </PageContainer>

  );
};
export default TableList;
